<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
    <style>
        #formDiv{
            width: 400px;
            height: 240px;
            border: 1px solid #000;
            margin:140px 0 0 430px;
        }
        #userDiv{
            margin: 20px 0 0 70px;
        }
        #pwdDiv{
            margin: 10px 0 0 69px;
        }
        #tel_Div{
            margin: 10px 0 0 69px;
        }
        #reg_div{
            margin: 10px 0 0 180px;
        }
    </style>
    <!--导入jquery的js库-->
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            //获取id="tip"的span标签对象
            var span = $("#tip")
            //当用户输入用户名之后,失去焦点事件触发
            $("#username").blur(function () {
                var username =  $("#username").val() ;
                //发送ajax请求
                $.ajax({
                    //请求后台地址
                    url:"/Mybatis_Servlet_war/check",
                    //发送的数据
                    data:{"username":username},
                    //提交方式
                    type:"post",
                    //响应成功的回调函数
                    success: function(data){ //data:服务器响应过来成功的数据
                        if(data.code==1){
                            //给span标签对象设置成功标识
                            span.html(data.msg) ; //设置文本
                            span.css("color","green") ;
                        }else{
                            //给span标签对象设置成功标识
                            span.html(data.msg) ; //设置文本
                            span.css("color","red") ;
                        }
                    },
                    dataType: "json" //服务器想响应过来的数据格式
                })

            })
            //获取用户名

        })
    </script>
</head>
<body>
<div id="formDiv">
    <form>
        <div id="userDiv">
            用户名&ensp;&ensp;<input type="text" id="username"
                                  name="userName"           placeholder="请您输入用户名" />
            <span id="tip"></span>
        </div>

        <div id="pwdDiv">
            密&ensp;&ensp;&ensp;&nbsp;码&ensp;<input type="password" name="" placeholder="请输入您的密码" />
        </div>

        <div id="tel_Div">
           确认密码&ensp;<input type="password" placeholder="请确认您的密码" />
        </div>

        <div id="reg_div">
            <input type="submit" value="注册" />
        </div>
    </form>
</div>>
</body>
</html>